<template>
  <el-dialog
    v-model:model-value="showDialog"
    title="编辑商品"
    width="800px"
    destroy-on-close
    @opened="handleOpened"
    @closed="handleClosed"
  >
    <el-form
      ref="formRef"
      :model="form"
      :label-width="120"
    >
      <slot
        name="form-item"
        :form="form"
        :initial-detail-text="initialDetailText"
        :initial-desc-text="initialDescText"
      >
        <goods-name v-model:model-value="form.name" />
        <goods-img v-model:model-value="form.thumbnailUrl" />
        <GoodsAudit v-model:model-value="form.verifyFlag" />
        <RechargeName
          v-if="form.type == 'recharge'"
          v-model:model-value="form.rechargeAccountRegexId"
          v-model:model-regx="form.rechargeAccountRegex"
          v-model:model-place-holder="form.rechargePlaceHolder"
        />
        <goods-description
          v-model:model-value="form.description"
          :initial-value="initialDescText"
        />
        <goods-detail-text
          v-model:model-value="form.detailText"
          :initial-value="initialDetailText"
        />
      </slot>
    </el-form>

    <template #footer>
      <el-button @click="handleCancel">
        取消
      </el-button>
      <el-button
        type="primary"
        @click="clickConfirm"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import GoodsAudit from "./addGoodsFormItem/GoodsAudit.vue";
import { useEditGoods } from "@/components/goodsCenter/compositions/useEditGoods";
import { IGoodsPageRow } from "@/api/modules/pointsMall";
import GoodsName from "@/components/goodsCenter/addGoodsFormItem/GoodsName.vue";
import GoodsImg from "@/components/goodsCenter/addGoodsFormItem/GoodsImg.vue";
import GoodsDescription from "@/components/goodsCenter/addGoodsFormItem/GoodsDescription.vue";
import GoodsDetailText from "@/components/goodsCenter/addGoodsFormItem/GoodsDetailText.vue";


const props = withDefaults(
  defineProps<{
    show: boolean;
    rowData: IGoodsPageRow;
    submitUrl?: string; // 提交时的API地址
    formProps?: string[]; // 标识form中的item项都有哪些，会影响初始化时的格式化，提交时的格式化
  }>(),
  {
    show: false,
    formProps: () => [
      "name",
      "thumbnailUrl",
      "detailText",
      "description",
      "bannerImages",
    ],
    submitUrl: "",
  }
);
const emits = defineEmits([ "update:show", "confirm", "cancel", "click-submit" ]);
const editGoodsFormRef = ref();
const showDialog = computed({
  get() {
    return props.show;
  },
  set(val) {
    return emits("update:show", val);
  },
});

const { getDetail, form, initialDetailText, formRef, formatForm, submitForm, initialDescText } =
  useEditGoods();

const clickConfirm = async () => {
  const _form = formatForm(props.formProps);
  //处理多张图片，第一张为主图
  _form.bannerImages = _form.thumbnailUrl.toString();
  _form.thumbnailUrl = _form.thumbnailUrl[0];

  if (!props.submitUrl) {
    formRef.value?.validate(async (valid: any, fields: any) => {
      if (valid) {
        showDialog.value = false;
        emits("click-submit", _form);
      }
    });
  } else {
    submitForm(props.submitUrl, _form).then(() => {
      showDialog.value = false;
      emits("confirm");
    });
  }
};

const handleOpened = () => {
  getDetail(props.rowData, props.formProps);
  //轮播图处理
  if (form.bannerImages) {
    form.thumbnailUrl = form.bannerImages.split(",");
  } else {
    //没有轮播图处理封面
    form.thumbnailUrl = form.thumbnailUrl.split(",");
  }
};

const handleClosed = () => {
  editGoodsFormRef.value?.resetFields();
  initialDetailText.value = "";
};

const handleCancel = () => {
  showDialog.value = false;
};
</script>

<style scoped lang="scss"></style>
